<?php
$this->Html->addCrumb('Services');

//css
echo $this->Html->css(array('jquery.cluetip','font-awesome/css/font-awesome.min','slideJS/slideJS'), false);
echo $this->Html->script(array('plugins/jquery.cluetip','plugins/jquery.slides.min','plugins/jquery.evenifhidden'), false);

$this->Html->scriptStart(array('inline' => false));
echo '
      $(function(){
        $(".ad_logo img").each(function(index, value) {
        if($(this).attr("data-desc")){
          $(this).attr("title",$(this).attr("rel"));
           $(this).addClass("logo");
          }
        });
        $(".ad_logo img.logo").cluetip({ cluetipClass: "jtip", arrows: true, splitTitle : "|",  positionBy : "mouse" , topOffset : 20, leftOffset : 40,
          hoverIntent: {
            sensitivity:  30,
            interval: 300,
            timeout: 1000
          },
          fx :{open : "fadeIn", speed : "slow"},
          clickThrough : true
        });

        if($("#ad1 img").size() > 0 || $("#ad2 img").size()) {
        var options = {width: 300, height: 200};
        var optionsHide = {navigation :{active : false}, pagination : {active : false} };
        var optionsShow = { navigation :{active : true}, play: {
          active: true,
          auto: true,
          interval: 6000,
          swap: true
        }}

        if ($("#ad1 img").size()> 0) {
         var ad1Options = {};
         if($("#ad1 img").size() ==1) {
          $.extend(true, ad1Options, optionsHide, options);
          } else {
            $.extend(true, ad1Options, optionsShow, options);
          }
          $("#ad1").slidesjs(ad1Options);
        }

        if ($("#ad2 img").size()> 0) {
         var ad2Options = {};
         var optionsCallback = { callback : {
          complete : function (number) {
            $("#ad2 a").show();
              var height = $("#ad2 img:nth-child(" + number+ ")").height();
              $("#ad2 .slidesjs-container").css("height",height);
            },
          loaded : function (number) {
          $("#ad2 a").hide();
            }
          }
          };
         if($("#ad2 img").size() ==1) {
          $.extend(true, ad2Options, optionsHide, optionsCallback, {width: 300});
          } else {
            $.extend(true, ad2Options, optionsShow, optionsCallback, {play : {interval : 8000}}, {width:300});
          }
          $("#ad2").slidesjs(ad2Options);
        }

        }
      });
       ';
$this->Html->scriptEnd();
?>
<div class="row-fluid">
  <div class="span8 offset1">
  <h1 class="inline">Services for weddings in Trinidad and Tobago</h1>
  <?php if(empty($services)) { ?>
    <p>No services are currently available.</p>
  <?php } else {
    echo '<div id="servicesContainer" style="position: relative;">';
    foreach($services as $service) { $rec = $service['Service'];
    $thumb = !empty($rec['image_path']) ? $rec['image_path'] : Configure::read('App.servicesDefaultImage');
    ?>

    <div class="ad_logo"> <?php echo $this->Html->image($thumb, array('alt' => $rec['name'],'class'=>'center', 'rel'=>$rec['name'].'|'.$rec['description'], 'data-desc'=>$rec['description'], 'url'=>array('controller'=>'companies', 'action'=>'company_service',$rec['id'])))?>
      <div class="ad_logo_text"><span ><?php echo $rec['name'];?></span></div>
    </div>
  <?php }
  echo "</div>";

   echo $this->element('main_pagination');
  } ?>
</div>
  <div class="span2">
       <div id="adSection" >
        <?php echo $this->element('rotating_ads2'); ?>
      </div> 
  </div>
</div>